<template>
  <el-drawer
    :title="translate('cmoboDetail')"
    :visible.sync="isShowModal"
    size="1000px"
  >
    <div class="df mb20">
      <span class="flex1">
        {{ translate("tcname") }}：{{ detailInfo.mealsName }}</span>
      <span class="flex1">
        {{ translate("comboIndate") }}：{{ detailInfo.validTime }}</span>
      <span v-if="detailInfo.autoFreezeDate" class="flex1">
        {{ translate("autoThrwTime") }}：{{ detailInfo.autoFreezeDate }}</span>
      <!-- <span> 有效时段：{{ detailInfo.mealsName }}</span> -->
    </div>
    <div class="mb20">
      <span> {{ translate("applyProduct") }}：{{ detailInfo.useProject }}</span>
    </div>
    <div class="line-style" />
    <div v-if="detailInfo.mealsType != '1'" class="syqkDiv">
      {{ translate("useStatus") }}： {{ translate("totalDegree")
      }}{{ detailInfo.numCount }}{{ translate("degree") }}｜{{
        translate("useStatus1")
      }}{{ detailInfo.useCount }}{{ translate("degree") }}
      {{ translate("residue") }}{{ detailInfo.remainCount
      }}{{ translate("degree") }}
    </div>
    <el-tabs v-model="activeTab" @tab-click="tabClick">
      <el-tab-pane :label="translate('comboUseRecord')" name="0">
        <el-table
          ref="tableo"
          v-loading="tableLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="translate('cmoboId')"
            min-width="150"
            show-overflow-tooltip
            prop="id"
          />
          <el-table-column
            align="center"
            :label="translate('tcname')"
            show-overflow-tooltip
            min-width="150"
            prop="mealsName"
          />
          <el-table-column
            align="center"
            :label="translate('useCount')"
            show-overflow-tooltip
            min-width="80"
            prop="useNum"
          >
            <template slot-scope="scope">
              {{ scope.row.useNum ? scope.row.useNum : "1" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="translate('product')"
            min-width="120"
            prop="project"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="translate('useTime')"
            min-width="160"
            show-overflow-tooltip
            prop="useTime"
          />
          <el-table-column
            align="center"
            :label="translate('handle')"
            fixed="right"
            width="100"
          >
            <template v-slot="scope">
              <template>
                <el-button
                  v-if="scope.row.businessId"
                  type="text"
                  @click="
                    mealsCancelUseBtn(
                      scope.row.businessId,
                      scope.row.mealsMemberId
                    )
                  "
                >{{ translate("repeal") }}</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="translate('comboHandleRecord')" name="1">
        <el-table
          v-loading="tableLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="translate('cmoboId')"
            min-width="240"
            show-overflow-tooltip
            prop="id"
          />
          <el-table-column
            align="center"
            :label="translate('tcname')"
            min-width="200"
            show-overflow-tooltip
            prop="mealsName"
          />
          <el-table-column
            align="center"
            :label="translate('handleType')"
            min-width="120"
            show-overflow-tooltip
          >
            <template v-slot="scope">
              <span v-if="scope.row.handleType === '1'">{{
                translate("freeze")
              }}</span>
              <span v-if="scope.row.handleType === '2'">{{
                translate("thaw")
              }}</span>
              <span v-if="scope.row.handleType === '3'">{{
                translate("cmoboDdjust")
              }}</span>
              <span v-if="scope.row.handleType === '4'">{{
                translate("cancellation")
              }}</span>
              <span v-if="scope.row.handleType === '5'">{{
                translate("cmoboDdjust")
              }}</span>
              <span v-if="scope.row.handleType === '6'">{{
                translate("transfer")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="translate('handleRemark')"
            min-width="200"
            prop="handleRemake"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="translate('handleTime')"
            min-width="160"
            prop="handleTime"
          />
          <el-table-column
            align="center"
            :label="translate('operator')"
            min-width="120"
            prop="handleUser"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <Paginations
      :total="totalCount"
      @SizeChange="pageSizeChange"
      @current-change="currentPageChange"
    />
  </el-drawer>
  <!-- <div class="app-main-title">套餐详情<div class="goback" @click="goBack">
      <i class="el-icon-refresh-left" /> {{translate('backPage')}}
    </div></div> -->
</template>
<script>
import { comboDetailPost, mealsCancelUse } from '@/api'
import dayjs from 'dayjs'
import Paginations from '@/components/paginations'
export default {
  name: 'ComboDetail',
  components: {
    Paginations
  },
  data() {
    return {
      isShowModal: false,
      activeTab: '0',
      detailInfo: {},
      pagination: {
        firstQueryTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        page: 1,
        rows: 10
      },
      totalCount: 0,
      dataList: [],
      tableLoading: false
    }
  },
  created() {
    // this.detailInfo = this.$route.query
    // this.comboDetail()
  },
  methods: {
    mealsCancelUseBtn(businessId, mealsMemberId) {
      const that = this
      this.$alert(this.translate('placerepeal'), this.translate('repealuse'), {
        confirmButtonText: this.translate('enter'),
        callback: action => {
          if (action === 'confirm') {
            mealsCancelUse({
              param: {
                businessId, mealsMemberId
              }
            }).then((res) => {
              if (res.errorCode === '000000') {
                that.$message.success(this.translate('repealscs'))
                that.comboDetail(this.detailInfo)
              }
            })
          }
        }
      })
    },
    comboDetail(detailInfo) {
      const { activeTab, pagination } = this
      const param = {
        listType: activeTab,
        type: detailInfo.type,
        id: detailInfo.id
      }
      this.tableLoading = true
      comboDetailPost({ pagination, param }).then(res => {
        this.tableLoading = false
        this.dataList = res.record.data || []
        this.totalCount = res.record.count || 0
        this.detailInfo = { ...detailInfo, useProject: res.record.useProject }
        this.$nextTick(() => {
          this.$refs.tableo.doLayout()
        })
      }, () => {
        this.tableLoading = false
      })
    },
    tabClick(val) {
      this.comboDetail(this.detailInfo)
    },
    goBack() {
      this.$router.replace(`/combo/salesRecord`)
    },
    currentPageChange(val) {
      this.pagination.page = val
      this.comboDetail(this.detailInfo)
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.comboDetail(this.detailInfo)
    }
  }
}
</script>
<style lang='scss' scoped>
@import "@/styles/variables.scss";
.tabs {
  display: flex;
  align-items: center;
  .tab {
    margin-right: 30px;
    font-weight: 600;
  }
  .active {
    color: $primaryColor;
  }
}
.syqkDiv {
  position: absolute;
  right: 30px;
  z-index: 99;
  top: 152px;
}
</style>
